<template>
  <div class="orderIndex">
    <div class="header">
      批发采购订单明细
    </div>
    <el-row :gutter="12">
      <el-col
        v-for="i in list"
        :key="i"
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8">
        <div class="detail">
          <span>{{ i.key }}</span>
          <span>{{ i.value }}</span>
        </div>
      </el-col>
    </el-row>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%;">
        <el-table-column
          prop="date"
          label="序号"
          width="180"/>
        <el-table-column
          prop="name"
          label="产品通用码"
          width="180"/>
        <el-table-column
          prop="address"
          label="产品名称"
          width="180"/>
        <el-table-column
          prop="address"
          label="规格"
          width="180"/>
        <el-table-column
          prop="address"
          label="单位"
          width="180"/>
        <el-table-column
          prop="address"
          label="UDI"
          width="180"/>
        <el-table-column
          prop="address"
          label="生产批号"
          width="180"/>
        <el-table-column
          prop="address"
          label="生产日期"
          width="180"/>
        <el-table-column
          prop="address"
          label="有效期"
          width="180"/>
        <el-table-column
          prop="address"
          label="注册证号(或备案号)"
          width="180"/>
        <el-table-column
          prop="address"
          label="生产企业"
          width="180"/>
        <el-table-column
          prop="address"
          label="生产线"
          width="180"/>
      </el-table>

    </template>
  </div>
</template>

<script>
export default {
  name: 'OrderIndex',
  data () {
    return {
      list: [{
        key: '订单号',
        value: 'WS20190908144156834'
      }, {
        key: '订单状态',
        value: '待收货'
      }, {
        key: '提交时间',
        value: '2019-5-20 17:32:57'
      }, {
        key: '总数量',
        value: '6'
      }, {
        key: '供应商',
        value: '麦子医疗'
      }, {
        key: '订单备注',
        value: 'WS20190908144156834'
      }, {
        key: '配送地址',
        value: '江苏省南京市栖霞区马群街道紫东路1号紫东创意园'
      }, {
        key: '收货人',
        value: '陈晨'
      }, {
        key: '联系电话',
        value: '0756-1234567'
      }, {
        key: '配送方式',
        value: '快递'
      }, {
        key: '拒绝订单备注',
        value: 'WS20190908144156834'
      }]
    }
  }
}
</script>

<style lang="less">
  .orderIndex {
    .header {
      font-size: 16px;
      font-weight: 500;
      color: rgba(38, 52, 76, 1);
      padding-bottom: 10px;
      margin-bottom: 6px;
      border-bottom: 1px solid #eef0f5;
    }

    .detail {
      font-size: 14px;
      padding: 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      span:first-child {
        font-weight: 500;
        color: #909db0;
        display: inline-block;
        width: 100px;
        text-align: right;
        padding-right: 10px;
      }

      span:last-child {
        color: #26344c;
      }
    }
  }
</style>
